<template>
  <view class="content">
    <image class="logo" :src="$getImageUrl('icon/icon.png')"></image>
    <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
      <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
        <u--input v-model="model1.userInfo.name" border="none"></u--input>
      </u-form-item>
      <u-form-item
        label="性别"
        prop="userInfo.sex"
        borderBottom
        @click="
          showSex = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="model1.userInfo.sex"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择性别"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </u--form>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      description="如果选择保密会报错"
      @close="showSex = false"
      @select="sexSelect"
    >
    </u-action-sheet>
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <u-button type="primary" loading loadingText="加载中"></u-button>
      <u-button type="error" loading loadingText="加载中"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      showSex: false,
      model1: {
        userInfo: {
          name: "uView UI",
          sex: "",
        },
      },
      actions: [
        {
          name: "男",
        },
        {
          name: "女",
        },
        {
          name: "保密",
        },
      ],
      rules: {
        "userInfo.name": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.sex": {
          type: "string",
          max: 1,
          required: true,
          message: "请选择男或女",
          trigger: ["blur", "change"],
        },
      },
      radio: "",
      switchVal: false,
    };
  },
  onLoad() {},
  methods: {
    sexSelect(e) {
      this.model1.userInfo.sex = e.name;
      this.$refs.form1.validateField("userInfo.sex");
    },
  },
  onReady() {
    console.log(this.$refs.form1);
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules);
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
